<template>
    <!-- 风险清单 -->
    <div class="riskInfo">
        <ul class="header">
            <!-- <li @click="$router.push('./riskInventory')">风险清单</li>
            <li @click="$router.push('./riskMonitoring')" >风险监控</li> -->
            <li @click="go1">风险清单</li>
            <li @click="go2">风险监控</li>
            <li class="currentLi">风险统计</li>
        </ul>
        <div class="queryDiv">
            <div class="queryDiv_top">
                <ul class="ul11">
                    <li class="clearfix">
                        <span class="spa">单位名称</span>
                        <em @click="companyPropShow = true"
                            v-if="!name13">默认本单位
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                        <em @click="companyPropShow = true"
                            v-else>{{name13}}
                            <x-icon type="ios-arrow-right"
                                    size="20"></x-icon>
                        </em>
                    </li>
                    <li class="clearfix">
                        <span class="spa">时间</span>
                        <datetime v-model="parmas.data.Date"
                                  @on-change="change1"
                                  format="YYYY-MM"></datetime>
                        <x-icon type="ios-arrow-right"
                                size="20"></x-icon>
                    </li>
                </ul>
                <div class="queryBtn"
                     @click="query">查询</div>
            </div>
        </div>
        <ul class="destailUl clearfix"
            v-for="(item,index) in listArr"
            :key="index"
            v-show="nodata">
            <li class="destailLi">
                <p>{{item.DepartName}}</p>
                <ul class="ul_on clearfix">
                    <li class="li_on">
                        <h5>{{item.IsBigSource}} </h5>
                        <h6>重大风险</h6>
                    </li>
                    <li class="li_on">
                        <h5>{{item.NotConTrolled}}</h5>
                        <h6>不受控</h6>
                    </li>
                    <li class="li_on">
                        <h5>{{item.IsConTrolled}}</h5>
                        <h6>受控</h6>
                    </li>
                    <li class="li_on">
                        <h5>{{item.ConTrolled}}</h5>
                        <h6>待监控</h6>
                    </li>
                </ul>
            </li>
        </ul>
        <p v-show="!nodata"
           class="noDestail">暂无数据...</p>
        <myMenu @clickBack="back"
                backPath='/Index/newEdit'></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompany"></companyProp>
    </div>
</template>
<script>
import { Datetime } from 'vux'
import myMenu from '@/commonComponents/menu'
import companyProp from '@/commonComponents/companyProp'
export default {
    components: {
        Datetime,
        myMenu,
        companyProp
    },
    data () {
        return {
            name13: '',
            parmas: {
                allowPaging: 'true',
                business: 'GetRiskDynamicManagementCount',
                data: {
                    departId: '',
                    Date: ''
                },
                pageIndex: 0,
                pageSize: 20000,
                tokenId: '',
                userId: ''
            },
            listArr: [],
            nodata: true,
            companyPropShow: false
        }
    },
    created () {
        // if (window.sessionStorage.getItem('time')) {
        //     this.parmas.data.Date = window.sessionStorage.getItem('time')
        // } else {
        // }
        var day2 = new Date()
        day2.setTime(day2.getTime())
        var m = day2.getMonth() + 1 < 10 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1
        this.parmas.data.Date = day2.getFullYear() + '-' + m
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        this.name13 = token.deptname
        this.parmas.data.departId = token.deptid
        this.dataArr()
    },
    mounted () {
        // var token = JSON.parse(window.localStorage.getItem('userInfo'))
        // this.parmas.userId = token.userid
        // if (window.sessionStorage.getItem('name1')) {
        //     this.name13 = window.sessionStorage.getItem('name1')
        //     this.parmas.data.departId = window.sessionStorage.getItem('departId')
        // } else {
        //     this.name13 = token.deptname
        //     this.parmas.data.departId = token.deptid
        // }

        // this.dataArr()
    },
    methods: {
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('time')
            // this.$router.push('./safeCheck')
        },
        go1 () {
            this.$router.push('./riskInventory')
            window.sessionStorage.clear()
        },
        go2 () {
            this.$router.push('./riskMonitoring')
            window.sessionStorage.clear()
        },
        change1 (value) {
            window.sessionStorage.setItem('time', value)
        },
        query () {
            this.dataArr()
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then((res) => {
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.nodata = true
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            })
        },
        selectCompany (item) {
            this.companyPropShow = false
            this.name13 = item.Name
            this.parmas.data.departId = item.Id
        }
    }
}
</script>
<style lang="less" scope>
.riskInfo {
    width: 100%;
    height: 100%;
    background-color: #ebeef3;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 50px;
        background-color: #fff;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 44px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .queryDiv {
        width: 100%;
        background-color: #fff;
        margin-top: 10px;
        .queryDiv_top {
            width: 100%;
            padding-bottom: 1px;
            background-color: #fff;
            .ul11 {
                padding: 0 10px;
                li {
                    padding: 10px 0;
                    border-bottom: 1px solid #eee;
                    width: 100%;
                    height: 50px;
                    line-height: 30px;
                    position: relative;
                    font-size: 16px;
                    display: flex;
                    .vux-x-icon {
                        fill: #999;
                        float: right;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        top: 14px;
                        right: 0px;
                    }
                    .spa {
                        float: left;
                        height: 30px;
                        line-height: 30px;
                        width: 140px;
                        font-size: 14px !important;
                        line-height: 30px !important;
                        color: #333;
                    }
                    em {
                        float: right;
                        color: #999;
                        width: 200px;
                        height: 30px;
                        font-size: 14px;
                        line-height: 30px;
                        text-align: right;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        padding-right: 4px;
                        div {
                            float: right;
                            margin-left: 20px;
                            width: 26%;
                            position: relative;
                            text-align: right;
                            color: #999;
                            input {
                                width: 16px;
                                height: 16px;
                                position: absolute;
                                top: 6px;
                                left: 10px;
                                text-align: center;
                            }
                        }
                    }
                    .weui-cell {
                        padding: 0;
                        height: 28px;
                        z-index: 999999;
                        width: 200px;
                        height: 28px;
                    }
                    .vux-cell-value {
                        float: right;
                        width: 200px !important;
                        height: 28px;
                        font-size: 14px;
                        text-align: right;
                        color: #999;
                        padding-right: 6px;
                    }
                    .weui-cell_access .weui-cell__ft:after {
                        display: none;
                    }
                    .vux-datetime .weui-cell .weui-cell_access {
                        width: 259px;
                        height: 28px;
                    }
                }
            }
            .queryBtn {
                height: 40px;
                line-height: 40px;
                left: 40px;
                margin: 25px auto;
                text-align: center;
                width: 200px;
                border-radius: 25px;
                background-color: #2269ff;
                letter-spacing: 4px;
                color: #fff;
            }
        }
    }
    .destailUl {
        width: 100%;
        background-color: #ebeef3;
        .destailLi {
            width: 100%;
            height: 116px;
            padding-top: 10px;
            p {
                width: 100%;
                height: 50px;
                line-height: 50px;
                background-color: #fff;
                letter-spacing: 2px;
                color: #2269ff;
                padding-left: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
            }
            .ul_on {
                background-color: #fff;
                padding-left: 16px;
                box-sizing: border-box;
                .li_on {
                    width: 86px;
                    float: left;
                    margin-top: 10px;
                    h5 {
                        width: 86px;
                        height: 20px;
                        left: 20px;
                        color: #2269ff;
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                        border-right: 1px solid #f0eff4;
                    }
                    h5:nth-of-type(4) {
                        border-right: 0;
                    }
                    h6 {
                        width: 86px;
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        color: #999;
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .noDestail {
        margin-top: 10px;
        background-color: #fff;
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
    }
    .weui-cell:before {
        border-top: 0;
    }
    .vux-cell-primary {
        // margin-right: 10px;
        height: 28px;
        line-height: 31px;
    }
}
</style>
